<template>
	<div class="detail_content" v-loading="boxloading">
		<!-- 返回 -->
		<HyPageHeader :title="deta.title" class="cursor-pointer" />
		<!-- 详情区 -->
		<div class="detail_box">
			<div class="detail">
				<!-- 评审进度 -->
				<Schedule style="margin-bottom: 10px" v-if="deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
				<div class="detail_left">
					<!-- 应用信息   都有-->
					<div class="Unit_Information">
						<HyCard title="应用信息">
							<Unit :message="data?.info" />
						</HyCard>
					</div>
					<!-- 数字化实施申报开发前期 -->
					<div class="Unit_Information" v-if="deta.type == 0">
						<decForm :message="deta?.appCode" :declareId="deta?.declareId" :id="deta?.id" :tableType="deta?.tableType" :info="data.info" />
					</div>
					<!-- 应用开发前中后期显示-->
					<div class="Unit_Information" v-if="deta.type == 4 || deta.type == 1">
						<kouJibm :message="data.info" />
					</div>
					<!-- 变更信息表 -->
					<div class="Unit_Information" v-if="data?.change?.appCode && deta.type != 2 && data?.change?.status == '3'">
						<HyCard title="变更信息">
							<chengInfo :message="data.change" />
						</HyCard>
					</div>
					<!-- 终止信息 -->
					<div class="Unit_Information" v-if="data?.terminate?.appCode && deta.type != 3 && data?.terminate?.status == '3'">
						<HyCard title="终止信息">
							<endApp :message="data.terminate" />
						</HyCard>
					</div>

					<!-- 应用开发前期 填写中后期-->
					<!-- <div class="Unit_Information" v-if="deta.isBj">
						<kouJibmForm :message="data.info" />
					</div> -->

					<!-- 变更信息表 -->
					<div class="Unit_Information" v-if="deta.type == 2">
						<HyCard title="变更信息">
							<chengInfoForm :message="deta?.appCode" :id="deta?.id" :cheng="data.change" />
						</HyCard>
					</div>
					<!-- 终止信息表 -->
					<div class="Unit_Information" v-if="deta.type == 3">
						<HyCard title="终止信息">
							<endAppForm :message="deta?.appCode" :id="deta?.id" :terminate="data.terminate" />
						</HyCard>
					</div>

					<!-- 项目验收材料表 -->
					<div class="Unit_Information" v-if="deta.type == 4">
						<HyCard title="项目验收材料">
							<acceptanceForm :message="deta?.appCode" :id="deta?.id" />
						</HyCard>
					</div>

					<!-- 留痕轨迹 -->
					<History v-if="deta.type == 1 && deta.processInstanceId" :processInstanceId="deta.processInstanceId" />
				</div>
			</div>
			<div class="bott_box" v-show="deta.type == 1">
				<el-button plain class="wihte-button" @click="fillOut">填写实施中、后期资料</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { checkDataDetail } from '/@/api/Implementation/addImple';
import { declareByIdAppDe } from '/@/api/digitalList/digitalLization';
import HyPageHeader from '/@/components/HyPageHeader/index.vue';
import HyCard from '/@/views/digitalList/detail/components/Card.vue';
import Schedule from '@cqdcg/admin/views/flow/task/Schedule/index';
import History from '@cqdcg/admin/views/flow/task/History/index';
import Unit from './components/unit.vue';
import kouJibm from './components/kouJibm.vue';
import kouJibmForm from './components/kouJibmForm.vue';
import chengInfoForm from './components/chengInfoForm.vue';
import chengInfo from './components/chengInfo.vue';
import endAppForm from './components/endAppForm.vue';
import endApp from './components/endApp.vue';
import acceptanceForm from './components/acceptanceForm.vue';
import decForm from './components/decForm.vue';
import { computed, ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
onMounted(() => {
	let data = route.query;
	if (!data) {
		return;
	}
	deta.value.id = data.id;
	deta.value.reallyId = data.reallyId; //变更和终止真实id
	deta.value.appCode = data.appCode;
	deta.value.instanceId = data.instanceId;
	deta.value.declareId = data.declareId;
	deta.value.title = data.title;
	deta.value.type = data.type;
	deta.value.tableType = data.tableType;
	deta.value.processInstanceId = data.processInstanceId;

	// 详情接口
	if (data.id) {
		getDetailed();
	} else {
		getdeclareByIdAppDe(); //首次进入时渲染头部
	}
});
const boxloading = ref(false);
let deta: any = ref({
	title: '数字化申报',
	id: '',
	reallyId: null, //真实id 查询变更和终止的历史记录
	appCode: '',
	instanceId: '',
	declareId: '',
	type: 0, //判断由哪个页面跳转过来 0-新增编辑前期资料 1-填写实施中后期 2-应用变更 3-应用终止 4应用验收
	tableType: null, //1开发2运维
	isBj: false, //判断是否是填写中后期资料
	processInstanceId: '',
});
let data = reactive({
	//基本详情信息
	info: {
		base: {},
	},
	//应用变更
	change: {
		appCode: '',
		status: '',
	},
	//应用终止
	terminate: {
		appCode: '',
		status: '',
	},
	//验收材料
	appCheck: {
		appCode: '',
	},
});
const getDetailed = () => {
	let id = deta.value.id;
	let reallyId = deta.value.reallyId || -123;
	boxloading.value = true;
	checkDataDetail({ implementationId: id, reallyId: reallyId })
		.then((res) => {
			boxloading.value = false;
			if (res.code == 0) {
				data.info = res.data.implementation;
				data.appCheck = res.data.implementation?.appCheck;
				//判断有没有应用或终止，change是变更 terminate是终止
				data.change = res.data?.implementationChangeLog.change;
				data.terminate = res.data?.implementationChangeLog.terminate;
			}
		})
		.catch((res) => {
			boxloading.value = false;
		});
};
//获取declareByIdAppDe的详情
const getdeclareByIdAppDe = () => {
	boxloading.value = true;
	let declareId = deta.value.declareId;
	declareByIdAppDe({ id: declareId })
		.then((res) => {
			boxloading.value = false;
			if (res.code == 0) {
				data.info.base = res.data;
			}
		})
		.catch((res) => {
			boxloading.value = false;
		});
};

//填写中后期资料
const fillOut = () => {
	router.push({
		path: '/digitalImplement/detail/appli',
		query: {
			appCode: deta.value.appCode,
			id: deta.value.id,
			instanceId: deta.value.instanceId,
			title: '实施填报',
			type: deta.value.type,
			tableType: deta.value.tableType,
		},
	});
};

function handleBack() {
	window.history.length > 1 ? router.go(-1) : router.push('/');
}
</script>

<style lang="scss" scoped>
.detail_content {
	width: 100%;
	padding: 15px;
	padding-bottom: 0px;
	:deep(.h-full) {
		height: auto;
	}

	.detail_box {
		width: 100%;
		height: calc(100vh - 175px);
		overflow: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		left: 0px;
		top: 0px;
		.review_progress {
			// 评审进度
			margin-top: 20px;
			margin-bottom: 10px;
		}
		.detail {
			flex: 1;
			overflow: auto;

			.detail_left {
				.Unit_Information {
					margin-bottom: 10px;
				}
			}
		}
		.bott_box {
			margin-top: 10px;
			width: 100%;
			padding: 10px 0;
			text-align: center;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			flex-grow: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
